<template>
  <div id="supplier">
    <!--查询表单-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item >供应商管理</el-breadcrumb-item>
    </el-breadcrumb><br>
    <el-form :inline="true" :model="supplierInfoObj">

      <el-form-item label="公司名称:" >
        <el-input placeholder="请输入公司名称" v-model="supplierInfoObj.companyName">
        </el-input>
      </el-form-item>

      <el-form-item label="代表人名称:" >
        <el-input placeholder="请输入代表人名字" v-model="supplierInfoObj.name">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="selBtn">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="supplierInfoAry" style="width: 100%"
              ref="multipleTable"
              tooltip-effect="dark">
      <el-table-column
          prop="supplierId"
          label="供货商编号"
          width="180">
        <template slot-scope="scope">
          <a href="#" @click.prevent="look(scope.row)">{{ scope.row.supplierId}}</a>
        </template>
      </el-table-column>
      <el-table-column
          prop="companyName"
          label="公司名称"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="法定代表人姓名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="phone"
          label="手机号码"
          width="180">
      </el-table-column>
      <el-table-column
          prop="address"
          label="公司地址"
          width="180">
      </el-table-column>
      <el-table-column
          prop="checkTag"
          label="审核状态"
          width="180">
        <template slot-scope="scope">
          <span v-if="scope.row.checkTag=='S001-1'">等待审核</span>
          <span v-if="scope.row.checkTag=='S001-2'">审核不通过</span>
          <span v-if="scope.row.checkTag=='S001-3'">审核通过</span>
        </template>
      </el-table-column>
      <!--操作列-->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="danger"
              round
              icon="el-icon-edit"
              @click="deleteSup(scope.row)" plain>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="pageSizeList"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>

    <!-- 查看详细信息对话框 -->
    <el-dialog title="查看供货商详细信息" :visible.sync="lookVisible">
      <el-form ref="form" :model="supplierInfoObj2" :disabled="true" label-width="200px">
        <el-form-item label="供货商编号" >
          <el-input v-model="supplierInfoObj2.supplierId" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="关联前台编号" >
          <el-input v-model="supplierInfoObj2.sysUsersId" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="账户余额" >
          <el-input v-model="supplierInfoObj2.balance" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="公司名称" >
          <el-input v-model="supplierInfoObj2.companyName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="法定代表人"  >
          <el-input v-model="supplierInfoObj2.name" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="手机号码"  >
          <el-input v-model="supplierInfoObj2.phone" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="营业执照"  >
          <el-input v-model="supplierInfoObj2.licenseLink" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="公司地址"  >
          <el-input v-model="supplierInfoObj2.address" :disabled="true">
          </el-input>
        </el-form-item>
        <el-form-item label="详细地址"  >
          <el-input v-model="supplierInfoObj2.detailAddress" :disabled="true">
          </el-input>
        </el-form-item>
        <el-form-item label="申请时间"  >
          <el-date-picker
              v-model="supplierInfoObj2.createDate"
              type="datetime"
              placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" :disabled="true">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="审核人"  >
          <el-input v-model="supplierInfoObj2.checker" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="审核时间"  >
          <el-date-picker
              v-model="supplierInfoObj2.checkerTime"
              type="datetime"
              placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" :disabled="true">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="审核理由"  >
          <el-input v-model="supplierInfoObj2.checkReason" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="审核状态">
          <el-select v-model="supplierInfoObj2.checkTag" :disabled="true">
            <el-option :value="'S001-1'" label="等待审核"></el-option>
            <el-option :value="'S001-2'" label="审核不通过"></el-option>
            <el-option :value="'S001-3'" label="审核通过"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-dialog>


  </div>
</template>

<script>
export default {
  name: "Supplier",
  data() {
    return {
      supplierInfoObj2:{
        supplierId: null,
      },
      supplierInfoAry: [],
      // 当前页号
      pageNo: 1,
      // 当前页大小
      pageSize: 5,
      // 总记录数
      total: 0,
      // 页大小列表
      pageSizeList: [2, 5, 10, 20],
      ary:[],
      rebactVisible: false,
      lookVisible:false,
      supplierInfoObj: {
        companyName: "",
        name: "",
      },
    }
  },
  methods:{
    // 页大小改变 x
    handleSizeChange(val) {
      this.pageSize = val
      this. selBtn()
    },
    // 页号改变
    handleCurrentChange(val) {
      this.pageNo = val
      // 重新查询
      this. selBtn()
    },
    //分页查询供应商信息
    async  selBtn() {
      // 用es6的解构函数
      const {data: res} = await this.$http.post
      (`/supplierInfo/queryAll/${this.pageNo}/${this.pageSize}`,this.supplierInfoObj)
      this.supplierInfoAry = res.list
      this.total = res.total

    },

    //查看详细信息对话框
    look(row) {
      this.supplierInfoObj2=row
      this.lookVisible=true
    },

    //删除
    deleteSup(row){
      //弹出问框
      this.$confirm('确认要删此信息吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        //确定
        const { data: res } = await this.$http.post(`/supplierInfo/delBySupplierId`,row);
        this.$message.success(res);
        //界面刷新
        this.selBtn();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
  },
  mounted() {
    this.selBtn()
  },
}
</script>

<style scoped>

</style>